<template>
    <div class="header">
       <div class="header-title">
           <div class="header-left">
               <div class="iconfont back-icon">
                   <img src="../../../static/img/logo.png" alt="">
               </div>
           </div>
           <div class="header-input">
               <!--<button v-on:click="test"></button>-->
           </div>
           </div>
           <div class="header-right">
               <span class="iconfont header-caidan">&#xe64e;</span>
           </div>
       </div>
</template>

<script>
    export default {
        name: "Header",
        methods:{
            test:function () {
                mui.alert('Test','Title',function () {
                    mui.alert('在来一次','再来一次1');
                });
            }
        },
    }
</script>

<style lang="stylus"  type="text/stylus" scoped>
    @import "../../assets/css/varibles.styl"
    .header
        display:flex
        line-height : 1rem
        background-color: #7a95d8
        color:#fff
        height: 1.67rem
        padding-top:.6rem
        .header-title
             display:flex
             height: 1rem
            .header-left
                width 1.6rem
                float: left
                .back-icon>img
                    position : relative
                    width:.8rem
                    height:.6rem
                    top :-.15rem
                    left:.3rem
            .header-input
                flex :1
                width : 6.8rem
                height : .6rem
                background #ffffff
                border-radius:.5rem
                color:#ccc
            .header-right
                width: 1.6rem
                float: right
                text-align center
                .header-caidan
                    position: relative;
                    top: -0.15rem;
            .arrow-icon
                font-size:.24rem
                margin-left :-.04rem
</style>